<template>
    <div>
        <div class="container e-m-h-auto e-m-b-15">
            <el-page-header @back="goBack" content="加盟商详情"></el-page-header>
            <div class="flex">
                <!-- 基本信息 -->
                <div class="e-flex-1">
                    <div class="details-head e-m-t-30">
                        <span class="title e-m-r-15">{{ form.name }}</span>
                    </div>
                    <div class="details-body e-m-t-15">
                        <!-- <div class="cell">账户余额：{{ form.balance }}</div>
                        <el-divider direction="vertical"></el-divider> -->
                        <div class="cell">账户管理模式：{{ form.paymode }}</div>
                    </div>
                    <!-- <div class="details-body e-m-t-15">
                        <div class="cell">负责人：<span class="color-main">{{ form.manager.name || '--' }}</span><i class="el-icon-edit color-main"></i></div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">联系电话：{{ form.manager.mobile || '--' }}</div>
                    </div> -->
                    <div class="e-m-t-20">
                        <el-button type="primary" icon="el-icon-edit" plain @click="stratEdit">编辑</el-button>
                        <!-- <el-button type="" icon="el-icon-open" plain @click="setState(form.usestate)">{{ form.usestate == '已启用'?'冻结站点账号':'解冻站点账号' }}</el-button> -->
                    </div>
                </div>
                <!-- 充值&提现 -->
                <div class="recharge-withdrawal-box">
                    <div class="item">
                        <div class="flex align-items-center">
                            <div class="e-flex-1">
                                <div class="e-m-b-5">可用余额</div>
                                <div v-if="form.paymode">
                                    <span class="num">{{ utils.formatMoney(form.balance) }}</span><small>元</small>
                                </div>
                                <div v-else>
                                    <span class="num">不限</span>
                                </div>
                            </div>
                            <div class="e-p-l-60">
                                <el-button type="primary" class="e-w-120" @click="setRecharge" :disabled="!form.paymode">充值</el-button>
                                <el-button type="" class="e-w-120" @click="checkRecord">查看明细</el-button>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="item">
                        <div class="flex align-items-center">
                            <div>
                                <div class="flex align-items-center">
                                    <i class="iconfont icon-qianbao"></i>
                                    <div class="e-flex-1">
                                        <div class="">已付金额</div>
                                        <span class="text">{{ utils.formatMoney(form.amount) }}</span><small>元</small>
                                    </div>
                                </div>
                            </div>
                            <div class="e-flex-1 text-center">
                                <div class="divider"></div>
                            </div>
                            <div>
                                <div class="flex align-items-center">
                                    <i class="iconfont icon-dongjiezijin"></i>
                                    <div class="e-flex-1">
                                        <div class="">预留现金</div>
                                        <span class="text">{{ utils.formatMoney(form.cash) }}</span><small>元</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="container e-m-h-auto e-m-b-15">
            <div class="type-state e-m-b-30">
                <span v-for="(item, index) in typeArr" :key="index" :class="{ 'on': typeId == item.value }"
                    @click="typeId = item.value">{{ item.name }}</span>
            </div>
             <!-- 站点管理 -->
             <div class="container-item" v-if="typeId == 1">
                <siteList :franchiseId="id"></siteList>
            </div>
            <!-- 加盟商管理员 -->
            <div class="container-item" v-if="typeId == 2">
                <clerkList :franchiseId="id"></clerkList>
            </div>
            <!-- 小哥列表 -->
            <div class="container-item" v-if="typeId == 3">
                <brother-list :franchiseId="id"></brother-list>
            </div>
            <!-- 回收订单 -->
            <div class="container-item" v-if="typeId == 4">
                <orderUserList :franchiseId="id"></orderUserList>
            </div>
            <!-- 后端厂商 -->
            <div class="container-item" v-if="typeId == 5">
                <manufacturer-list :franchiseId="id"></manufacturer-list>
            </div>
            <!-- 充值申请记录 -->
            <div class="container-item" v-show="typeId == 6">
                <franchisere-charge ref="recharge" @submit="confirmRecharge" :franchiseId="id"></franchisere-charge>
            </div>
        </div>
        <!-- 充值 -->
        <!-- <el-dialog title="充值" :visible.sync="dialogVisible" width="500px" z-index="99">
            <el-form ref="form" :model="recharge" :rules="rules" label-width="100px">
                <el-form-item label="充值方式" prop="accountid">
                    <el-select v-model="recharge.accountid" placeholder="请选择" @change="chooseWay">
                        <el-option v-for="item in options" :key="item.id" :label="item.type" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值金额" prop="amount">
                    <el-input type="number" v-model="recharge.amount" placeholder="请输入充值金额"></el-input>
                </el-form-item>
                <el-form-item label="充值时间" prop="arrivaldate">
                    <el-date-picker v-model="recharge.arrivaldate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="汇款单号" prop="transactionid" v-if="recharge.way == '银行账户'">
                    <el-input v-model="recharge.transactionid" placeholder="请输入汇款单号"></el-input>
                </el-form-item>
                <el-form-item label="上传凭证" prop="icon" v-if="recharge.way == '银行账户'">
                    <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="handleFilesSuccess"
                        class="avatar-uploader">
                        <img v-if="recharge.proves" :src="fileURL + recharge.proves" class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传凭证</div>
                        </div>
                    </cropper-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRecharge">确定</el-button>
            </span>
        </el-dialog> -->
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="editDialogVisible" width="500px" z-index="99">
            <el-form ref="editform" label-width="auto">
                <el-form-item label="名称">
                    <el-input v-model="editForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- <el-form-item label="是否启用余额">
                    <el-switch v-model="editForm.paymode"></el-switch>
                </el-form-item> -->
                <el-form-item label="账户管理模式">
                    <el-radio-group v-model="editForm.paymode" class="e-m-t-12">
                        <div class="e-p-b-15">
                            <el-radio label="预存模式">预存模式</el-radio>
                            <div class="tips e-font-14 e-p-l-24">加盟商需预存金额到运营商才能使用线上结算，余额不足时不能使用线上结算</div>
                        </div>
                        <div class="e-p-b-15">
                            <el-radio label="后付模式">后付模式</el-radio>
                            <div class="tips e-font-14 e-p-l-24">不需要预存金额也可以使用线上结算</div>
                        </div>
                        <div class="e-p-b-15">
                            <el-radio label="禁用">禁用线上结算</el-radio>
                            <div class="tips e-font-14 e-p-l-24">加盟商禁止使用线上支付，仅可使用线下结算</div>
                        </div>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmEdit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import clerkList from '@/components/clerk-list/clerk-list.vue'
import siteList from '@/components/site-list/site-list';
import orderUserList from '@/components/order-user-list/order-user-list.vue'
export default {
    layout: 'admin',
    components: {
        clerkList,
        siteList,
        orderUserList
    },
    head() {
        return {
            title: '加盟商详情'
        }
    },
    data() {
        return {
            dialogVisible: false,
            id: 0,
            recharge: {
                amount: null,
                accountid: 0,
                remark: '',
                arrivaldate: '',
                proves: '',
                type: null, //充值方式类型
                transactionid: '', //汇款单号
            },
            form: {
                name: '',
                balance: '',
                paymode: false
            },
            rules: {
                amount: [
                    { required: true, message: '请输入金额', trigger: 'blur' },
                ],
                accountid: [
                    { required: true, message: '请选择汇款账户', trigger: 'change' }
                ],
                arrivaldate: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ]
            },
            typeId: 1,
            typeArr: [
                {
                    name: '站点管理',
                    value: 1
                },
                {
                    name: '员工列表',
                    value: 2
                },
                {
                    name: '小哥列表',
                    value: 3
                },
                {
                    name: '回收订单',
                    value: 4
                },
                {
                    name: '后端厂商',
                    value: 5
                },
                {
                    name: '充值申请记录',
                    value: 6
                },
            ],
            // 编辑
            editDialogVisible: false,
            options: [],//汇款账户
            editForm: {
                name: '',
                paymode: false
            }
        }
    },
    created() {
        this.id = Number(this.$route.query.id)
        // this.form.name = this.$route.query.name
        // this.form.balance = this.$route.query.balance
        // this.form.paymode = this.$route.query.paymode
        // this.getAccountList()
        this.getDetails()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        // 运营商详情
        getDetails() {
            this.$axios.get('/Franchise/Detail?id=' + this.id).then((res) => {
                this.form = res
            })
        },
        stratEdit() {
            this.editDialogVisible = true
            this.editForm.name = this.form.name
            this.editForm.paymode = this.form.paymode
        },
        confirmEdit() {
            this.$axios.post('/Franchise/Edit', {
                id: this.id,
                name: this.editForm.name,
                paymode: this.editForm.paymode
            }).then((res) => {
                this.$message.success('修改成功')
                this.getDetails()
                this.editDialogVisible = false
            })
        },
        setRecharge() {
            // this.dialogVisible = true
            // this.recharge.amount = null
            // this.recharge.remark = ''
            // this.recharge.accountid = ''
            // this.recharge.arrivaldate = ''
            // this.recharge.proves = ''
            this.typeId = 6
            this.$refs.recharge.setRecharge()
        },
        // 选择充值方式
        chooseWay(id){
            console.log('选择充值方式:',id)
            this.recharge.type = this.options.find((item)=>item.id == id).type
        },
        // 充值
        confirmRecharge() {
            this.getDetails()
            // this.$refs.form.validate((valid) => {
            //     if (valid) {
            //         this.$axios.post('/Franchise/Recharge/Create', {
            //             amount: this.recharge.amount,
            //             accountid : this.recharge.accountid,
            //             arrivaldate : this.recharge.arrivaldate,
            //             franchiseId: this.id,
            //             // proves : this.recharge.proves,
            //             // remarks: this.recharge.remark,

            //         }).then((res) => {
            //             if(res.qrcode){
                            
            //             }else{
            //                 this.$message.success('充值成功')
            //                 this.dialogVisible = false
            //             }
                        
            //         })
            //     } else {
            //         console.log('error submit!!');
            //         return false;
            //     }
            // });
        },
        // 汇款账户
        // getAccountList() {
        //     this.$axios.post('/Operator/Account/List', {
        //         "Key": ''
        //     }).then((res) => {
        //         this.options = res.filter((item)=>item.state == '已启用')
        //     })
        // },
        // 上传凭证
        // handleFilesSuccess(res, file) {
        //     console.log(res,file)
        //     if (file.status === "success") {
        //         this.loading = false
        //         this.recharge.proves = res.path
        //     }
        // },
        // 查看余额记录
        checkRecord(){
            this.$router.push({
                path: '/franchisee/balanceRecord',
                query: {
                    id: this.id
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.recharge-withdrawal-box {
    // width: 400px;
    background: #e6fbfb;
    border: 1px solid #9aeeef;
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    color: var(--secondary);

    .item {
        flex: 1;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed var(--border-light);
        padding-bottom: 15px;
        margin-bottom: 15px;

        &:last-child {
            border: 0;
            padding: 0;
            margin: 0;
        }

        .num {
            font-size: 32px;
            font-weight: bold;
            color: var(--orange);
        }

        .text {
            color: var(--dark);
            font-size: 20px;
        }

        .iconfont {
            font-size: 46px;
            margin-right: 15px;
            color: var(--grey);
        }
    }

    .divider {
        border-left: 1px solid var(--border-light);
        height: 40px;
        display: inline-block;
    }

    .flex {
        width: 100%;
    }
}

.details-head {
    .title {
        font-size: 20px;
    }
}

.details-body {
    display: flex;
    align-items: center;
    color: var(--secondary);
    font-size: 13px;

    .cell {
        margin-right: 10px;
        margin-left: 10px;

        &:first-child {
            margin-left: 0;
        }
    }
}

.admin-statistics-content {
    display: flex;
    background-color: #fff;
    padding: 15px;
    border: 1px solid var(--border-light);
    // border-radius: 4px;

    .item {
        &+.item {
            border-left: 1px solid var(--border-light);
            padding-left: 30px;
        }

        .icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--light);
            background-color: #f2f3f5;
            padding: 5px;
            margin: 0 20px 0 0;
            box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
        }

        label {
            color: var(--grey);
            font-size: 12px;
            margin-bottom: 5px;
            display: block;
        }

        .num {
            font-size: 30px;
        }
    }
}

.type-state {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 98;
}
</style>